<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .box1 {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 条件判断语句 v-if -->
        <div v-if="true">
            <!--  v-if在使用时和ifelse语句一致,当判断语句判断为true时就会[渲染]当前组件,其余组件不进行渲染 -->
            判断1
        </div>
        <!-- v-if和v-else以及v-else-if混用时 -->
        <div v-else>
            判断2
        </div>
        <div>
            <button @click="num+=10">{{num}}</button>
            <h2 v-if="num<40">差</h2>
            <h2 v-else-if="num<80">良</h2>
            <h2 v-else-if="num<90">良+</h2>
            <h2 v-else>优秀</h2>
        </div>
        <!-- v-show根据其后的插值判断是否显示当前组件 -->
        <!-- v-show不支持在template中使用,因为更不不会 -->

        <template v-show="false">
            <div class="box1" v-show="false">

            </div>
        </template>

    </div>
    <!-- 
        v-show和v-if的差别在于,v-if是在判断值为true时再创建,为false时再销毁 
        而v-show 是在页面渲染时就会加载,当判断值为false值只会修改display为none,并不会销毁
        v-show的差别在于,一个的负载是在开始加载时,一个负载在于频繁销毁和创建
     -->
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    num: 10,
                    score: 'A'
                };
            },
        });
    </script>
</body>

</html>